<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>我的服务项目</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <el-table
      ref="table"
      v-loading="loadingShow"
      element-loading-text="数据正在加载中..."
      :data="tableData"
      border
      @cell-click="handle"
      @selection-change="handleSelectionChange"
      @header-click="tableHeader"
      :height="tabHeight"
      :header-cell-style="{background:'#1da4f2',color:'#fff'}"
      style="width: 100%;font-size: 15px">
      <div slot="empty">
        <div>
          <img src="../../assets/空两本书.png" alt="" width="140" height="140" />
        </div>
        <p :style="{'marginTop': '5px'}">暂无记录</p>
      </div>
      <el-table-column
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        fixed
        width="60">
      </el-table-column>
      <el-table-column
        prop="item_type"
        label="服务类型"
        width="120"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <span>{{scope.row.item_type ? typeText(scope.row.item_type) : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="item_id"
        width="110"
        label="服务项目"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <span>{{scope.row.item_id ? scope.row.item_id : '空'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="rebate_amount"
        label="单价"
        width="100"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <span>{{scope.row.rebate_amount ? scope.row.rebate_amount + '元/次' : '空'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="checked_id"
        label="服务人员"
        width="100"
      >
        <template slot-scope="scope">
          {{scope.row.select ? doc_name : ''}}
        </template>
      </el-table-column>
    </el-table>
    <div class="keepBottom">
      <button @click="keep">保存</button>
    </div>
    <pop_select :show="typeShow"
                title="选择服务类型"
                height="70%"
                @confirmMethod="getServiceList"
                @close="typeShow = false"
                :dataList="item_typeList">
    </pop_select>
    <pop_select :show="itemShow"
                title="选择服务项目"
                height="70%"
                @confirmMethod="getServiceList"
                @close="itemShow = false"
                :dataList="item_idList">
    </pop_select>
    <pop_select :show="priceShow"
                title="选择单价"
                height="70%"
                @confirmMethod="getServiceList"
                @close="priceShow = false"
                :dataList="rebate_amountList">
    </pop_select>
  </div>
</template>

<script>
import typeList from '../../http/video.http'
import PopSelect from '../../components/Vue/PopSelect'
export default {
  name: 'TeamMyServicesTable',
  components: {
    pop_select: PopSelect
  },
  data () {
    return {
      team_id: this.$route.query.team_id,
      doc_name: this.$route.query.doc_name,
      loadingShow: false,
      tableData: [],
      selectList: [],
      row: [],
      typeList: typeList.typeList,
      isShowtabbar: sessionStorage.getItem('isShowtabbar'),
      // 筛选
      item_typeList: [],
      typeShow: false,
      item_idList: [],
      itemShow: false,
      rebate_amountList: [],
      priceShow: false,
      leftMenu: typeList.typeList
    }
  },
  computed: {
    typeName () {
      return function (type) {
        let text = ''
        this.leftMenu.forEach((curr, index) => {
          if (curr.type == type) {
            text = curr.name
            return false
          }
        })
        return text
      }
    },
    tabHeight () {
      let title = ''
      if (this.isShowtabbar) {
        title = 'calc(100vh - 44px - 60px)'
      } else {
        title = 'calc(100vh - 44px - 60px - 44px)'
      }
      return title
    },
    typeText () {
      return function (type) {
        let text = ''
        this.typeList.forEach((curr, index) => {
          if (curr.type == type) {
            text = curr.name
            return false
          }
        })
        return text
      }
    }
  },
  watch: {
    selectList: {
      handler (newVal) {
        this.tableData.forEach((item) => {
          this.$set(item, 'select', false)
        })
        newVal.forEach((curr) => {
          this.tableData.forEach((item) => {
            if (curr.id === item.id) {
              this.$set(item, 'select', true)
            }
          })
        })
      },
      immediate: true
    }
  },
  mounted () {
    this.$toast({
      message: '向左滑动查看更多',
      icon: 'like-o'
    })
    this.getServiceList()
    this.getSelect()
  },
  methods: {
    keep () {
      let ids = []
      if (this.selectList.length) {
        this.selectList.map((curr, index) => {
          if (index < this.selectList.length - 1) {
            ids += curr.id + ','
          } else {
            ids += curr.id
          }
        })
        ids = ids.toString()
      }
      this.$http.updateTeamAmount({team_amount_ids: ids, team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('保存成功')
            this.getServiceList()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getServiceList () {
      let item_type = ''
      let item_id = ''
      let rebate_amount = ''
      this.item_typeList.forEach((curr) => {
        if (curr.select === true) {
          console.log(curr.value)
          item_type += curr.value + ','
        }
      })
      this.item_idList.forEach((curr) => {
        if (curr.select === true) {
          item_id += curr.value + ','
        }
      })
      this.rebate_amountList.forEach((curr) => {
        if (curr.select === true) {
          rebate_amount += curr.value + ','
        }
      })

      if (item_type) {
        item_type = item_type.substring(0, item_type.length - 1)
      }
      if (item_id) {
        item_id = item_id.substring(0, item_id.length - 1)
      }
      if (rebate_amount) {
        rebate_amount = rebate_amount.substring(0, rebate_amount.length - 1)
      }

      this.$http.findTeamPrice({team_id: this.team_id,
        is_check_amount: '1',
        item_type: item_type,
        item_id: item_id,
        rebate_amount: rebate_amount})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.tableData = res.data.data
            this.tableData.map((curr, index) => {
              if (curr.checked_id) {
                this.$nextTick(() => {
                  this.$refs.table.toggleRowSelection(this.tableData[index], true)
                })
              }
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getSelect () {
      this.$http.findTeamPriceSelect({team_id: this.team_id, is_check_amount: 1})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.item_typeList = []
            this.item_idList = []
            this.doc_nameList = []
            this.rebate_amountList = []
            let data = res.data.data
            // data.select_doc_user_name.forEach((curr, index) => {
            //   // doc_user_name
            //   let obj = {
            //     value: curr.doc_user_name,
            //     text: curr.doc_user_name
            //   }
            //   this.doc_nameList.push(obj)
            // })

            data.select_item_id.forEach((curr, index) => {
              // doc_user_name
              let obj = {
                value: curr.item_id,
                text: curr.item_id
              }
              this.item_idList.push(obj)
            })
            data.select_item_type.forEach((curr, index) => {
              let obj = {
                value: curr.item_type,
                text: this.typeName(curr.item_type)
              }
              this.item_typeList.push(obj)
            })
            data.select_rebate_amount.forEach((curr, index) => {
              let obj = {
                value: curr.rebate_amount,
                text: curr.rebate_amount + '元/次'
              }
              this.rebate_amountList.push(obj)
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击表格头部筛选样式
    tableHeader (column, event) {
      if (column.property === 'item_type') {
        this.typeShow = true
      } else if (column.property === 'item_id') {
        this.itemShow = true
      } else if (column.property === 'rebate_amount') {
        this.priceShow = true
      }
    },
    renderHeader (h, {column}) { // h即为cerateElement的简写，具体可看vue官方文档
      return h(
        'span',
        [
          h('span', column.label),
          h('i', {
            class: 'el-icon-arrow-down',
            style: 'color:#fff;margin-left:5px;'
          })
        ]
      )
    },
    handleSelectionChange (val) {
      this.selectList = val
    },
    // 点击单元格
    handle (row, column, event, cell) {
      console.log(row)
      console.log(column)
      console.log(event)
      console.log(cell)
      this.row = row
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.keepBottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;

}
.keepBottom button{
  width: 95%;
  height: 44px;
  border: 1px solid #1DA4F2;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  margin: 0 10px;
}
</style>
